<template>
  <div class="vm">
    <h2  class="h-title">前端要素编辑</h2>
    <el-row>
      <el-button type="success" plain  @click="openActive"
        >开启编辑</el-button
      >
      <el-button type="success" plain @click="closeActive"
        >结束编辑</el-button
      >
    </el-row>
    <div id="map"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { ImageArcGISRest, XYZ, TileArcGISRest } from "ol/source";
import Tile from "ol/layer/Tile";
import { Image as ImageLayer } from "ol/layer";
import SourceVector from 'ol/source/Vector'
import Vector from 'ol/layer/Vector'
import GeoJSON from 'ol/format/GeoJSON'

import Select from 'ol/interaction/Select';
import Modify from 'ol/interaction/Modify';
import {singleClick, doubleClick,} from "ol/events/condition";
import * as olInteraction from 'ol/interaction';
import {Style,Stroke,Fill,Circle} from 'ol/style';

export default {
  name: "FeatureEdit",
  data() {
    return {
      map: null,
      select: null,
      modify: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
        let geoJson = new GeoJSON()

        let vectorChinaPoint = new Vector({
            source: new SourceVector({
                url: "/data/china_point.geojson",
                format: new GeoJSON(),
                wrapX: false
            })
        });

        let vectorWorldPolyon = new Vector({
            source: new SourceVector({
                url: "/data/countries.geojson",
                format: new GeoJSON(),
                wrapX: false
            })
        });

        // this.select = new Select({
        //     //此处可以指定可以出发选择的图层
        //     // layers: [vectorChinaPoint],
        //     condition: singleClick,
        //     // condition: doubleClick,
        //     style:new Style({
        //         stroke:new Stroke({
        //             color: "#409EFF",
        //             width: 2
        //         }),
        //         fill: new Fill({
        //             color: "rgba(0,255,0,0.7)",
        //         }),
        //     })
        // });
        this.select = this.addLayerClick(vectorWorldPolyon)

        let selectPoint = this.addLayerClick(vectorChinaPoint);


        //点击事件获取选中的要素
        this.select.on("select", (evt) => {
            console.log(evt, "evt======================");
            console.log(evt.selected, "selected======================");
            if (evt.selected.length>0)console.log(evt.selected[0].getGeometry().getCoordinates(), "evt.selected[0].getGeometry().getCoordinates()======================");
        })

        //
        this.modify = new Modify({
            features: this.select.getFeatures(),
            deleteCondition: doubleClick
        });

        let coordinates = [];

        this.modify.on("modifyend", (evt) => {
            console.log(evt.features.getArray()[0].getGeometry().getCoordinates(), "========================="); //getCoordinates
            evt.features.getArray().forEach(element => {
                coordinates.push(element.getGeometry().getCoordinates());
            });
        })
   
        let layers = [
            new Tile({
                source: new XYZ({
                    url:
                    "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd",
                    projection: "EPSG:4326",
                }),
            }),
            vectorWorldPolyon,
            vectorChinaPoint
        ];
        this.map = new Map({
            interactions: olInteraction.defaults().extend([this.select, this.modify]),
            // interactions: olInteraction.defaults().extend([this.select, this.modify, selectPoint]),
            layers: layers,
            target: "map",
            view: new View({
                projection: "EPSG:4326",
                center: [120.47941251849916, 27.84422812461475],
                zoom: 8,
            }),
        });

        // this.map.addInteraction(this.select)

    },
    openActive() {
        this.select.setActive(true)
        this.modify.setActive(true)
    },
    closeActive() {
        this.select.setActive(false)
        this.modify.setActive(false)
    },
    addLayerClick(clickLayer) {
      let selectClick = new Select({
        condition: singleClick,
        style:function(feature){
          // console.log(feature, "feature===================");
          console.log(feature.getGeometry().getType(), "feature.getGeometry().getType()===================");
          let style; 
          if(feature.getGeometry().getType()=="MultiPolygon" || feature.getGeometry().getType()=="Polygon"){
            style = new Style({
                stroke:new Stroke({
                    color: "#409EFF",
                    width: 2
                }),
                fill: new Fill({
                    color: "rgba(0,255,0,0.7)",
                }),
            })
          }else if(feature.getGeometry().getType()=="Point"){
            style = new Style({
              image: new Circle({
                  radius: 6,
                  fill: new Fill({ color: "#00F" })
              })
            })
          }
          return style;
        },
        filter: (feature, layer) => {
          return layer === clickLayer; // 需要添加事件的layer
        }
      });
      return selectClick;
    },

  },
};
</script>
<style scoped>
    #map {
        height: 100%;
        width: 100%;
    }
</style>